<template>
	<view class="w345 mauto p10 disflex jsbet align-cen">
		<view class="disflex align-cen w75 mr5">
			<view class="cfff fs14 fb600 mr3">{{city||'石家庄市'}}</view>
			<!-- <u-icon color="#fff" size="14" name="arrow-down"></u-icon> -->
		</view>
		<view @click="pageTo('/pages/search/index')" class="w240">
			<u-search placeholder="请输入关键字" :showAction="false" bgColor="#fff"></u-search>
		</view>
		<view class="posre ml5" @click="pageTo('/pages/notices/index')">
			<u-icon color="#fff" size="30" name="bell"></u-icon>
			<view class="bgred w6 h6 bradius5 posab top3 right2" v-if="messagesUnread"></view>
		</view>
		<view class="posre ml5" @click="addChangeStatus">
			<u-icon color="#fff" size="26" name="plus"></u-icon>
			<view class="add" v-if="addStatus">
				<view class="triangle-up"></view>
				<view class="addBg">

					<!-- #ifdef H5||MP||APP-PLUS -->
					<view class="disflex jsbet align-cen ml7 mr7 mt5" @click.stop="scanCode">
						<image class="w15 h15" src="../../static/images/scan.png"></image>
						<view class="cfff fs14">扫一扫</view>
					</view>
					<!-- #endif -->
					<view class="bg666 h1 mt4" v-if="scanHidden"></view>
					<view class="disflex jsbet align-cen ml7 mr7 mt10" @click.stop="getQrCode" v-if="scanHidden">
						<image class="w15 h15" src="../../static/images/grid.png"></image>
						<view class="cfff fs14">二维码</view>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="bg666 h1 mt4"></view>
					<view class="disflex jsbet align-cen ml7 mr7 mt10">
						<!-- <u-icon color="#fff" size="20" name="share-square"></u-icon> -->
						<image class="w15 h15" src="../../static/images/share-square.png"></image>
						<view class="cfff fs14">分享app</view>
					</view>
					<!-- #endif -->
				</view>
			</view>

		</view>
		<UserQrCode :scanStatus="scanStatus" :qrcodeUrl="qrcodeUrl" @close="scanStatus=false,addStatus=false">
		</UserQrCode>
	</view>
</template>

<script>
	import config from "@/config";
	import storage from "../../common/storage";
	import UserQrCode from "@/components/qrcode/user_qr_code.vue";
	export default {
		components: {
			UserQrCode
		},
		props: {
			addStatus: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			},
			rightValue: {
				type: String,
				default: ""
			},
			height: {
				type: String,
				default: "340rpx"
			},
			bgColor: {
				type: String,
				default: "linear-gradient(180deg, #0B87FF 0%, #18B3FF 100%)"
			},
			scanHidden: { //是否隐藏二维码入口
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				scanStatus: false, //二维码状态
				qrcodeUrl: '',
				messagesUnread: 0, //未读消息条数
				city: '', //当前城市
			}
		},
		async mounted() {
			// #ifdef H5
			(function() {
				var script = document.createElement('script');
				script.type = 'text/javascript';
				script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
				document.body.appendChild(script);
			})();
			this.$http.getWxConfig({
				'url': this.$utils.getPageUrl()
			}).then(res => {
				if (res.status) {
					wx.config(res.data)
					wx.ready((res) => {
						console.log("wx.ready", res)
					});
					wx.error(function(err) {
						console.log("error", err);
					});
				} else {
					this.$utils.msg(res.info)
				}
			})
			// #endif
			this.getMessagesUnread()

			const res = await this.$common.getLocation();
			// console.log(res, 'res');
			// console.log('666');
			this.city = res.city || '';
		},
		methods: {
			getMessagesUnread() {
				if (!this.$storage.getJson('users')) {
					return
				}
				this.$http.getMessagesUnread().then(res => {
					if (res.status) {
						this.messagesUnread = res.data
					}
				})
			},
			scanCode() {
				// #ifndef H5
				uni.scanCode({
					success: function(res) {},
					fail: error => {
						console.log("暂不支持1")
					}

				});
				// #endif
				// #ifdef MP||H5
				console.log("暂不支持H5扫码 走onScan这个方法")
				// this.log("暂不支持H5扫码 走onScan这个方法") 
				this.onScan()
				// #endif
			},
			onScan() {
				console.log("暂不支持H5扫码 走onScan这个方法")
				const that = this;
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
						var resultArr = result.split(','); // 扫描结果以逗号分割数组
						var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素，也就是最终的内容 
					},
					fail: function(response) {
						console.log("调用扫码失败", response)
					},
				});

			},
			addChangeStatus() {
				this.$emit("addChangeStatus", !this.addStatus)
			},
			pageTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getQrCode() {
				this.$emit("addChangeStatus", !this.addStatus)
				let user = storage.getJson('users')
				if (!user) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
				let url = encodeURIComponent('pages/index/index?u=' + user.id)
				// #ifdef H5
				url += '&source=1'
				// #endif
				// #ifdef MP
				url += '&source=2'
				// #endif
				this.qrcodeUrl = config.uni_app_web_api_url + "/qrcode?data=" + url
				this.scanStatus = true
			}
		}
	}
</script>

<style>
	.w29 {
		width: 58rpx;
		top: 158rpx;
		right: 30rpx;
	}

	.w295 {
		width: 590rpx;
		margin-top: 190rpx;
	}

	.h79 {
		height: 158rpx;
	}

	.h401 {
		height: 802rpx;
	}

	.bgFFBE00 {
		background: #FFBE00;
	}

	.qr {
		width: 470rpx;
		height: 470rpx;
		position: absolute;
		top: 266rpx;
		left: 12%;
	}

	.triangle-up {
		width: 0;
		position: relative;
		background-color: #333;
		opacity: 0.9;
	}

	.triangle-up::before {
		content: '';
		position: absolute;
		top: 4rpx;
		/* 向上定位与三角形高度相同 */
		left: 24rpx;
		transform: translateX(-50%);
		border-left: 10rpx solid transparent;
		/* 左边透明 */
		border-right: 10rpx solid transparent;
		/* 右边透明 */
		border-bottom: 18rpx solid #333;
		/* 底部为实心颜色（这里为红色）*/
		opacity: 0.9;
	}

	.add {
		z-index: 999;
	}

	.addBg {
		padding: 8rpx;
		width: 178rpx;
		padding-bottom: 20rpx;
		background-color: #333;
		opacity: 0.9;
		position: absolute;
		left: -128rpx;
		z-index: 9;
		margin-top: 20rpx;
		border-radius: 15rpx;
	}
</style>